<template>
  <div id="app">
    <sell-header :seller="seller"></sell-header>
    <div class="tab-wrapper"><tab :tabs="tabs"></tab></div>
  </div>
</template>

<script>
import SellHeader from "./components/sell-header/SellHeader";
import Tab from "./components/tab/Tab";
import Goods from "./components/goods/Goods";
import Reviews from "./components/reviews/Reviews";
import Seller from "./components/seller/Seller";
import { getSeller } from "./service/index";
export default {
  name: "App",
  components: {
    SellHeader,
    Tab,
  },
  data() {
    return {
      seller: {},
    };
  },
  computed: {
    tabs() {
      return [
        {
          label: "商品",
          component: Goods,
          data: {
            seller: this.seller,
          },
        },
        {
          label: "评论",
          component: Reviews,
          data: {
            seller: this.seller,
          },
        },
        {
          label: "商家",
          component: Seller,
          data: {
            seller: this.seller,
          },
        },
      ];
    },
  },
  created() {
    this._getSeller();
  },
  // 定义 getSeller 方法，该方法用于执行请求，获取 seller 数据，将数据放入 data 中，再传入所需的组件
  methods: {
    _getSeller() {
      getSeller().then((res) => {
        this.seller = res;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.tab-wrapper
  position fixed
  top 136px
  left 0
  right 0
  bottom 0
</style>
